<template>
  <div class="cm-wrapper">
    <px-scrollbar max-height="134px">
      <div class="flex flex-wrap w-[100%] gap-x-[2px] gap-y-[8px]">
        <div
          v-for="(item, index) in list"
          :key="item.tagNum ? item.tagNum : index"
          class="menu-item"
          :class="{ pointer: item.layer, selected: item.selected }"
          @click="showOrHideLayer(item)"
        >
          <div class="cm-rect" :style="{ backgroundColor: item.color, marginRight: '4px' }" />
          <ReTextTooltip :key="index" :style="{ 'white-space': 'nowrap', width: '110px' }" :content="item.name" />
        </div>
      </div>
    </px-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { eventBus } from "@/views/all/visual/template/utils";

import ReTextTooltip from "../../../components/ReTextTooltip";

defineOptions({
  name: "ColorMarking"
});
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      tip?: string;
    };
  }>(),
  {
    propValue: () => ({
      contentList: [{ color: "red", name: "管道1" }],
      tip: ""
    })
  }
);

const list = ref([]);

if (props.propValue.contentList.length > 0) {
  props.propValue.contentList.forEach(item => {
    list.value.push({
      ...item,
      selected: item.layer ? true : false
    });
  });
}

const showOrHideLayer = item => {
  if (!item.layer) return;
  item.selected = !item.selected;
  eventBus.emit("showOrHideLayer", item.layer);
};
</script>

<style lang="scss" scoped>
.cm-wrapper {
  width: 300px;
  max-height: 150px;
  padding: 12px 16px;
  background-color: rgb(255 255 255 / 75%);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 16%);

  .menu-item {
    width: 132px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;

    &.selected {
      background-color: #e3f2fd;
      color: #1976d2;
      font-weight: bold;
    }
  }

  .cm-rect {
    width: 16px;
    height: 8px;
  }
}
</style>
